<template>
  <div>
    <div class="nav">文章</div>
    <div v-for="item of list" :key="item._id" class="container">
      <span>
        <img :src="item.avatar" alt="" class="logo">
        {{item.date}}
      </span>
      <p class="title">{{item.title}}</p>
      <img :src="item.imgSrc" alt="" class="big">
      <p class="content">{{item.content}}</p>
      <span>
        <img src="../../assets/chat1.png" alt="" class="pinglun">
        {{item.collection}}
      </span>
      <span>
        <img src="../../assets/view.png" alt="" class="pinglun">
        {{item.reading}}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list:[]
    }
  },
  mounted(){
    this.$http("/api/article/list").then(res=>{
      // console.log(res.data.res)
      this.list = res.data.res
    })
  }
}
</script>

<style scoped>
.nav{
  width: 100%;
  height: 50px;
  background-color: rgb(92, 92, 235);
  box-sizing: border-box;
  padding: 10px;
  font-size: 17px;
  color: whitesmoke;
  position: fixed;
  top: 0;
  left: 0;
}
.container{
  margin-bottom: 15px;
  color: #333;
  font-size: 0.28rem;
  padding: 6px;
  margin-top: 50px;
}
  .big{
    width: 100%;
  }
  .content{
    font-size: 0.28rem;
  }
  .title{
    font-size: 0.5rem;
    font-weight: bolder;
    margin: 10px 10px;
  }
  .pinglun{
    width: 20px;
  }
  .logo{
    width: 50px;
    vertical-align: middle;
  }
</style>